<style lang='scss'>
	.add-user_excel-page {
		.excel-template {
			margin-bottom: 30px;
			.title-contain {
				display: flex;
				padding: 0px;
				align-items: center;
				.title {
					flex-grow: 1;
				}
				button {
					padding: 8px 20px;
				}
			}
		}
		.import-excel {
			.form-area {
				width: 360px;
				.el-cascader {
					width: 100%;
					margin-bottom: 18px;
				}
				.submit-btn {
					width: 100%;
					margin-top: 18px;
				}
			}
			.error-table {
				width: 50%;
    		margin: 0 auto;
			}
		}
	}
</style>
<template>
	<div class="add-user_excel-page">
		<el-card class="excel-template" shadow="hover">
		  <div slot="header" class="title-contain">
		    <span class="title">Excel模板<span class="remark-text error-remark-text">（请确认标题是否一致）</span>：</span>
		    <el-button type="primary" @click="downloadExcelTemplate" :loading="btn_loading_template">下载Excel模板</el-button>
		  </div>
		  <div>
				<goalExcelTb :data="[
					{label:'姓名'},{label:'出生日期',format:'2018/8/8'},{label:'性别',format:'男|女'},
					{label:'电话',format:'可选'},{label:'邮箱',format:'可选'},{label:'备注',format:'可选'},{label:'状态',format:'在职|离职'}]">
				</goalExcelTb>
		  </div>
		</el-card>
		<el-card class="import-excel" shadow="hover">
		  <div slot="header">
		    <span>导入记录</span>
		  </div>
		  <div style="display: flex;">
		  	<div class="form-area">
		  		<el-cascader
				    expand-trigger="hover"
				    filterable
				    placeholder="职位"
				    :props="{value:'id',label:'name',children:'jobs'}"
				    v-model="job_selected_arr"
				    :options="jobs">
				  </el-cascader>
			  	<uploadExcel :file_data.sync="file_data" :size_limit=0></uploadExcel>
			  	<el-button class="submit-btn" type="primary" :disabled="!can_submit" :loading="btn_loading_submit" @click="submit">导入{{btn_loading_submit?'中...':''}}</el-button>
		  	</div>
		  	<div class="error-table">
		  		<el-table row-key="index" :data="excel_error_data" :border="true" :stripe="true" max-height=323>
						<el-table-column
				      label="序号">
				      <template slot-scope="scope">
				      	{{scope.row[0]}}
				      </template>
				    </el-table-column>
				    <el-table-column
				    	min-width="230%"
				      label="错误说明">
				      <template slot-scope="scope">
				      	{{scope.row[1]}}
				      </template>
				    </el-table-column>
					</el-table>
		  	</div>
		  </div>
		</el-card>
	</div>
</template>
<script>
	import goalExcelTb from 'components/admin/goal_excel_tb.vue';
	import uploadExcel from 'components/upload_excel.vue';
	import { exportExcel } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				titles_on_data: [],
				date: '',
				file_data: '',

				excel_error_data: [],

				btn_loading_template: false,
				btn_loading_submit: false,

				jobs: [],
				job_selected_arr: []
			}
		},
		computed: {
			job_selected_id() {
				return this.job_selected_arr[this.job_selected_arr.length-1]||'';
			},
			can_submit() {
				return this.job_selected_id && this.file_data;
			}
		},
		methods: {
			downloadExcelTemplate() {
				this.btn_loading_template = true;
				this.$axios_blob.get('/admin/getUserExcelTemplate').then(res => {
					if(res && res.data) {
						let sheet_des = res.headers['content-disposition'];
						exportExcel(res.data, sheet_des.substr(sheet_des.indexOf('filename=')+9));
		    		this.$message.success('下载成功');
					}
				}).finally(() => {
					this.btn_loading_template = false;
				})
			},
			submit() {
				if(this.can_submit) {
					let loading = this.$loading({
	          lock: true,
	          text: '导入中',
	          background: 'rgba(100, 100, 100, 0.5)'
	        });
					let start = Date.now();
					this.btn_loading_submit = true;
					this.excel_error_data = [];
					let form_data = new FormData();
					form_data.append("job_id", this.job_selected_id);
					form_data.append("user_excel", this.file_data);
					this.$axios.post('/admin/importUser', form_data).then(res => {
						if(res.s == 1) {
							this.$message.success('上传成功');
							this.file_data = '';
							this.job_selected_arr = [];
						}else {
							this.excel_error_data = res.d;
						}
					}).finally(() => {
						this.btn_loading_submit = false;
						loading.close();
					})
				}
			}
		},
		created() {
			this.$axios.get('/admin/getDepartment').then(res => {
				if(res.s == 1) {
					this.jobs = res.d;
				}
			})
		},
		components: {
			goalExcelTb,
			uploadExcel
		}
	}
</script>